<template>
  <div class="main">
    <!-- 导航栏 -->
    <mt-header fixed title="萌宠视频" style="background: #f49b00">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div style="height: 40px"></div>

    <!-- 视频 -->
    <div class="video">
      <iframe
        :src="`${video.video}`"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
      >
      </iframe>
    </div>

    <!-- 点赞评论 -->
    <div class="tool">
      <div @click="good">
        <van-icon name="like" :color="`${this.color1 ? 'red' : 'gray'}`" />
        <span>点赞</span>
      </div>
      <div @click="collection">
        <van-icon name="star" :color="`${this.color2 ? 'orange' : 'gray'}`" />
        <span>收藏</span>
      </div>
      <div>
        <span class="iconfont icon-pinglun"></span>
        <a href="#com">评论</a>
      </div>
      <div>
        <van-icon name="share-o" />
        <span>转发</span>
      </div>
    </div>

    <!-- 标题 -->
    <div class="title">
      <h3>{{ video.title }}</h3>
      <p>时间：{{ time(video.time) }}</p>
    </div>

    <!-- 标签 -->
    <div class="tag">
      <van-tag
        round
        type="primary"
        size="large"
        color="#eae8e8"
        text-color="black"
        >萌宠</van-tag
      >
      <van-tag
        round
        type="primary"
        size="large"
        color="#eae8e8"
        text-color="black"
        >搞笑</van-tag
      >
      <van-tag
        round
        type="primary"
        size="large"
        color="#eae8e8"
        text-color="black"
        >宠物</van-tag
      >
      <van-tag
        round
        type="primary"
        size="large"
        color="#eae8e8"
        text-color="black"
        >娱乐</van-tag
      >
      <van-tag
        round
        type="primary"
        size="large"
        color="#eae8e8"
        text-color="black"
        >生活</van-tag
      >
    </div>

    <!-- 猜你喜欢 -->
    <div class="like">
      <h4>猜你喜欢</h4>
      <!-- <van-divider /> -->
      <div class="card">
        <div @click="goto(2)">
          <img
            src="https://wx2.sinaimg.cn/thumb180/b198d51egy1h7horo75u4j20u00tk0vi.jpg"
          />
          <p>"一次比一次重地摸你的宠物"</p>
        </div>
        <div @click="goto(3)">
          <img
            src="https://wx3.sinaimg.cn/thumb180/007kapiAly1h7hrb4gfktj30tm0m8427.jpg"
          />
          <p>【宠物搞笑视频】宠物搞笑瞬间 | 萌宠大联盟</p>
        </div>
      </div>
    </div>

    <!-- 评论 -->
    <div id="com" class="comment">
      <h4>评论</h4>
      <div class="search">
        <input
          @keyup.enter="goto"
          v-model="comment"
          id="input"
          background="#fcfcfc"
          type="text"
          placeholder="发布评论..."
        />
        <span class="iconfont icon-fabu" @click="judge"></span>
      </div>
      <div v-for="item in commentList" :key="item.id">
        <div class="list">
          <img :src="item.pic">
          <div>
            <p>{{item.userName}}</p>
            <p>发布时间: {{time(item.time)}}</p>
          </div>
        </div>
        <p>{{item.comment}}</p>
      </div>
    </div>
    <!-- 分割线 -->
    <van-divider :style="{ color: '#aaa', borderColor: '#ddd', margin:'0', padding: '10px',fontSize:'13px' }">到底啦</van-divider>
    
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      video: [],  // 存储详情页数据
      color1: false,  // 点赞
      color2: false,  // 收藏
      code: '',   // 用户有没有收藏视频; 200:已收藏；201:未收藏
      comment: '',  // 绑定输入框的评论
      commentList: [],  // 保存评论列表
      timer: null,			//防抖定时器
    };
  },
  methods: {
    // 点赞
    good() {
      this.color1 = !this.color1;
    },
    // 收藏
    collection() {
      if (this.$store.state.uid) {
        this.color2 = !this.color2;
      } else {
        Toast("未登录");
      }
    },

    // 发送请求，获得详情页数据
    getdata() {
      this.axios.get(`/video/details?vid=${this.$route.query.vid}`).then((res) => {
          console.log(res);
          this.video = res.data.data[0];
        });
    },
    // 转换时间函数
    time(time) {
      time = this.dayjs(time).add(8, "hour").format("YYYY-MM-DD HH:mm:ss");
      return time;
    },

    // 跳转
    goto(id){
      this.$router.push(`/video/details?vid=${id}`);
      setTimeout(()=>{
        window.location.reload()
      },100)
    },

    // 用户有没有收藏视频
    col(){
      let uid = this.$store.state.uid
      let vid = this.$route.query.vid
      let params = {"uid":uid,"vid":vid}
      this.axios.post('/video/select',params).then(res=>{
        this.code=res.data.code
        if(res.data.code==200){
          this.color2 = true
        }
      })
    },

    // 判断有没有登录与评论是否为空
    judge(){
      if(this.$store.state.uid){
        if(this.comment.length!==0){
          this.send()
        }else{
          Toast("评论不能为空！");
        }
      }else{
        Toast("未登录, 请登录后再发布评论！");
      }
    },

    // 发布评论
    send(){
      let comment = this.comment
      let time = new Date()
      let userName = this.$store.state.username
      let pic = this.$store.state.pic
      let vid = this.$route.query.vid
      let uid = this.$store.state.uid
      let params = {"comment":comment,"time":time,"userName":userName,"pic":pic,"vid":vid,"uid":uid}
      this.axios.post('/video/comment',params).then(res=>{
        console.log('发布评论',res);
      })
      // 刷新页面
      window.location.reload()
    },

    // 评论列表
    list(){
      let vid = this.$route.query.vid
      this.axios.get(`/video/selComment?vid=${vid}`).then(res=>{
        console.log('评论列表',res);
        this.commentList = res.data.data.reverse()
      })
    },

    // 修改评论页面的用户名与头像
    com(){
      let username = this.$store.state.username
      let pic = this.$store.state.pic
      let uid = this.$store.state.uid;
      let params = {"username": username,"pic": pic,"uid": uid,}
      this.axios.post('/video/change',params).then(res=>{
        console.log(res);
      })
    },
  },
  mounted() {
    this.getdata()  // // 详情页数据
    this.col()  // 用户有没有收藏视频
    this.com()
    this.list()  // 评论列表
  },

  // 监听收藏
  watch:{
    color2(to,from){
      if(this.timer){	//如果之前已经启动了定时器，必须先清除
				clearTimeout(this.timer)	//停止定时器的工作
				this.timer = null			//清空定时器变量
			}
      this.timer = setTimeout(()=>{
        let uid = this.$store.state.uid
        let vid = this.$route.query.vid
        let params = {"uid":uid,"vid":vid}
        if(to==true&&this.code!=200){
          this.axios.post('/video/collection',params).then(res=>{
            this.col()
            console.log(res);
            Toast('收藏成功')
          })
        }else if(to==false){
          this.axios.delete(`/video/cancel?uid=${uid}&vid=${vid}`).then(res=>{
            this.col()
            console.log(res);
            Toast('取消收藏')
          })
        } 
			},500)
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #fbf7f7;
  height: 100%;
}
.video {
  width: 100vw;
  height: 35vh;
  iframe {
    width: 100%;
    height: 100%;
  }
}
.tool {
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid rgb(222, 221, 221);
  margin-top: 5px;
  div {
    margin: 10px;
    span {
      margin-left: 5px;
    }
    a{
      margin-left: 5px;
      color: black;
    }
  }
}
.title {
  margin: 0 20px;
  h3 {
    margin-bottom: 0;
  }
  p {
    color: #aaa;
    font-size: 14px;
    margin-top: 10px;
  }
}
.tag {
  display: flex;
  justify-content: space-around;
  .van-tag--large {
    padding: 4px 18px;
  }
}

// 评论
.comment{
  margin: 10px 10px 0;
  h4 {
    width: 50px;
    height: 25px;
    text-align: center;
    border-bottom: 1px solid black;
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    input {
      width: 100%;
      margin: 8px 0;
      padding: 5px;
      border: 0;
      border-radius: 40px;
    }
  }
  div{
    background-color: white;
    padding: 2px 5px;
    margin-bottom: 5px;
    .list{
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      img{
        margin: 0 5px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      div{
        p{
          margin: 0;
          padding: 5px 15px;
        }
        :last-child{
          color: #aaa;
          font-size: 14px;
        }
      }
    }
    p{
      margin: 0;
      padding: 15px 10px;
    }
  }
  
}

// 猜你喜欢
.like {
  margin: 10px 10px 0;
  h4 {
    width: 70px;
    height: 25px;
    text-align: center;
    border-bottom: 1px solid black;
  }
  .card {
    display: flex;
    justify-content: space-evenly;
    div {
      padding: 5px;
      width: 40vw;
      background-color: rgb(249, 249, 249);
      box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.03);
      img {
        width: 100%;
      }
      p {
        font-size: 14px;
        // 多行显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
    }
  }
}
::v-deep .mint-header-title{
  font-size: 15px;
}
</style>